<template>
  <div class="GroupManagePage">
    <div class="panel-search" style="margin-bottom: 10px">
      <div class="search-item" style="width: 220px">
        <label>群组名称：</label>
        <a-input v-model:value="searchData.groupName" placeholder="请输入群组名称" @pressEnter="onSearch" allow-clear/>
      </div>
      <div class="search-item" style="width: 220px;margin-left:20px">
        <label>群组ID：</label>
        <a-input v-model:value="searchData.groupId" placeholder="请输入群组ID" @pressEnter="onSearch" allow-clear/>
      </div>
      <div class="search-item" style="width: 220px;margin-left:20px">
        <label>群主ID：</label>
        <a-input v-model:value="searchData.groupOwnerId" placeholder="请输入群主ID" @pressEnter="onSearch" allow-clear/>
      </div>
      <div class="search-item" style="width: 220px;margin-left:20px">
        <label>群主昵称：</label>
        <a-input v-model:value="searchData.username" placeholder="请输入群主昵称" @pressEnter="onSearch" allow-clear/>
      </div>
      <div class="search-btn">
        <a-button type="primary" @click="onSearch">查询</a-button>
        <a-button @click="onReset">重置</a-button>
      </div>
    </div>
    <div class="divider"></div>
    <div class="panel-table">
      <div class="panel-table-tool" style="margin-bottom: 20px">
        <div class="tool-btn" >
          <a-button @click="onEdit(null)" type="primary">创建群组</a-button>
          <a-button @click="onDelete(null)" type="primary" ghost style="margin-left: 10px">批量删除</a-button>
          <a-button @click="onExport()" type="primary" ghost style="margin-left: 10px">导出</a-button>
        </div>
      </div>
      <div class="panel-table-list">
        <!--这里是选择某项传过去的值-->
        <a-table :bordered="true" :data-source="tableData.data" :columns="tableData.columns"
                 :loading="tableData.loading" :pagination="false" :scroll="{x: 1200}"
                 :rowKey="(record) => {return record.groupId}"
                 :row-selection="{selectedRowKeys: tableData.selectedRowKeys, onChange: keys => {tableData.selectedRowKeys = keys}}">
          <!--        <template #bodyCell="{ text, record, index, column }">-->
          <!-- 头像列使用旧版语句 -->
          <template slot="img" slot-scope="text, record">
            <img style="width:20px; height:20px; object-fit: cover"
                 :src="record.img" :alt="record.groupName"/>
          </template>
          <template slot="operate" slot-scope="text, record, index">
            <div class="table-operate-btn">
              <span type="view" @click="onEdit(record)" style="color:#1c85ed ">修改</span>
              <span type="delete" @click="onDelete(record)" style="color:#1c85ed ">删除</span>
            </div>
          </template>
          <!--        </template>-->
        </a-table>
      </div>
      <div class="panel-table-pager">
        <a-pagination :current="pagerData.current" :pageSize="pagerData.pageSize" :total="pagerData.total" :show-total="total => '共' + total + '条'"
                      @showSizeChange="onPagerSizeChange" @change="onPagerChange" show-quick-jumper show-size-changer>
        </a-pagination>
      </div>
    </div>
  </div>

</template>
<script>

import { queryGroupData } from '../../../api/chat/group'

export default {
  components: {
    // UserManagerDetail, UserManagerEdit, UserManagerEditPwd
  },
  data() {
    return {
      searchData: {
        groupName: null,
        groupId: null,
        groupOwnerId: null,
        username: null,
      },
      modalData: {
        showDetail: false,
        showEdit: false,
        showEditPwd: false,
        data: null
      },
      orgList: [],
      treeData: [],
      tableData: {
        loading: false, selectedRowKeys: [], data: [],
        columns: [
          {title: "序号", key: "index", width: 80, align: "center", customRender: (text, record, index) => index + 1},
          {title: '群组名称', dataIndex: 'groupName', Width: 2, align: 'center', ellipsis: true},
          {title: '群组ID', dataIndex: 'groupId', minWidth: 2, align: 'center', ellipsis: true},
          {title: '头像', key: "img", minWidth: 2, align: 'center', ellipsis: true},
          {title: '群主ID', dataIndex: 'groupOwnerId', Width: 80, align: 'center', ellipsis: true},
          {title: '群主昵称', dataIndex: 'ownerName', Width: 10, align: 'center', ellipsis: true},
          {title: '创建时间', dataIndex: 'createTime', minWidth: 200, align: 'center', ellipsis: true},
          {title: '人数', dataIndex: 'memberCount', maxWidth: 2, align: 'center', ellipsis: true},
          {title: '操作', key: 'operate', dataIndex: 'operate',scopedSlots: { customRender: 'operate' },  width: 150,align: 'center' }
        ]
      },
      pagerData: {
        current: 1, pageSize: 10, total: 0
      }
    }
  },
  mounted() {
    this.queryTableList();
  },
  methods: {
    //获取页面数据


    //获取表格数据
    queryTableList() {
      let params = {
        groupName: this.searchData.groupName,
        groupId: this.searchData.groupId,
        groupOwnerId: this.searchData.groupOwnerId,
        username: this.searchData.username,
        limit: this.pagerData.pageSize,
        page: this.pagerData.current,
      }
      this.tableData.loading = true;
      queryGroupData(params).then(res => {
        if(res.code == 200) {
          //设置表格数据
          this.tableData.data = res.rows;
          //设置分页数据
          this.pagerData.total = res.total;
        }
      }).finally(() => {
        this.tableData.loading = false;
      })
    },
    //查询
    onSearch() {
      this.pagerData.current = 1;
      this.queryTableList();
    },
    //重置搜索条件
    onReset() {
      this.searchData.groupName = null;
      this.searchData.groupId = null;
      this.searchData.groupOwnerId = null;
      this.searchData.username = null;
      this.onSearch();
    },
    //新增修改
    onEdit(record) {
      this.modalData.showEdit = false;
      this.$nextTick(() => {
        this.modalData.data = record ? {
          modalTitle: "修改",
          groupId: record.groupId,
          groupName: record.groupName,
          groupOwnerId: record.groupOwnerId,
          ownerName:record.ownerName,
          img: record.img,
          userNo: record.no
        } : {modalTitle: "创建群组"};
        this.modalData.showEdit = true;
      });
    },
    //删除
    onDelete(record) {
      let groupIdList = [];
      if(record) { //删除
        groupIdList = [record.groupId];
      } else { //批量删除
        let selectedRows = _.filter(this.tableData.data, o => {
          return _.includes(this.tableData.selectedRowKeys,o.groupId);
        })
        groupIdList = _.map(selectedRows, "groupId");
      }
      if(groupIdList.length<=0) {
        this.$message.warning("请选择要删除的数据！");
        return false;
      }
      let params = {
        groupIdList: _.join(groupIdList, ","),
      };
      let _this = this;
      this.$modal.confirm({
        title: "信息提示", content: "确定要删除已选数据吗？", okText: "确定",
        onOk() {
          _this.$ajax.post(_this.$Api.groupData.deleteGroupData, params).then(res => {
            if (res.data.code == 200) {
              _this.$message.success("操作成功");
              _this.onSearch();
              _this.tableData.selectedRowKeys = [];
            } else {
              _this.$message.error("操作失败");
            }
          }).catch(() => {
            _this.$message.error("操作失败");
          })
        },
      });
    },
    //分页页码改变
    onPagerChange(current) {
      this.pagerData.current = current;
      this.queryTableList();
    },
    //分页每页数量改变
    onPagerSizeChange(current, size) {
      this.pagerData.current = 1;
      this.pagerData.pageSize = size;
      this.queryTableList();
    },
    onExport(){
      const groupName = this.searchData.groupName?this.searchData.groupName:'';
      const groupId = this.searchData.groupId?this.searchData.groupId:'';
      const groupOwnerId = this.searchData.groupOwnerId?this.searchData.groupOwnerId:'';
      const username = this.searchData.username?this.searchData.username:'';
      window.open(
        this.$Api.groupData.exportGroupDataList
        +"?ticketNO=" +  localStorage.getItem("ticketNO")+"&groupName="+groupName+"&groupId="+groupId+"&groupOwnerId="+groupOwnerId+"&username="+username,"_blank"
      );
    },
    //关闭弹窗
    closeModal(type, data) {
      this.modalData.data = null;
      this.modalData[type] = false;
      if (data && data.refresh) {
        this.onSearch();
      }
    }
  }
}
</script>

<style >
.panel-table-list {
  .table-operate-btn {
    & > span {
      cursor: pointer;
      &[type='edit'] {color: #1c85ed;}
      &[type='view'] {color: #67C239;}
      &[type='delete'] {color: #FB3711;}
      &:not(:first-child) {margin-left: 10px;}
    }
  }
}
.GroupManagePage{
  display: flex; flex-direction: column; flex-wrap: nowrap;
  .panel-search {
    flex: 0 0 auto; position: relative; display: flex; flex-wrap: wrap;
    padding: 20px 24px 5px 24px; background: #ffffff;
    .search-item {
      display: flex; flex-flow: row nowrap; align-items: center;
      width: 340px; margin-right: 20px; margin-bottom: 15px;
      label {
        flex: 1 0 auto; text-align: right;
      }
      .ant-select, .ant-picker, .ant-select-selection--single, .ant-cascader-picker {
        width: 100%;
      }
    }
    .search-btn {
      margin-bottom: 15px;
      .ant-btn {
        &:not(:first-child) {margin-left: 10px;}
      }
    }
  }
  .divider{
    height: 8px;
    background: #f0f0f0;
    margin: 14px 0;
  }


}
</style>
